<template>
  <h2>管理员登录界面</h2>

  <form method="POST" action="http://localhost:8080/upload" enctype="multipart/form-data">
    <div class="imgaa">
      <img src="1.png" alt="">
    </div>
    <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>

    <div class="hnj">
      <span class="bit">登录</span>
    </div>


    <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>

    <div class="">
      <div class="adc">
        <div class="input-group mb-3 cvd">
          <input type="text" class="form-control" placeholder="用户名" aria-label="Email" v-model="query.username">
        </div>

        <div class="input-group mb-3 cvd vbn">
          <input type="password" class="form-control" placeholder="密码(6到16个字符组成，区分大小写)" aria-label="Password" v-model="query.pwd">
        </div>

        <div class="d-grid gap-2 d-md-block cva">
          <button class="btn btn-primary" type="button" style="width: 120%" @click="login">登录</button>
        </div>

      </div>
    </div>
  </form>

<div style="margin-top: 100px">
  <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
</div>

  <router-link to="/login">登录</router-link>
</template>

<script setup lang="ts">
// 引入bootstrap框架
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import request from "../hooks/request";
import AdminMain from "../components/admin/AdminMain.vue"
import {h, ref, render} from "vue";
import {router} from "../router";
import {Component} from "vue";

const query=ref({
  username:null,
  pwd:null
})

const component:Component=ref(AdminMain)
const login=async ()=>{
  if (!document.forms[0].reportValidity())
    return
  let admin= await request.get('admin/login',query.value)
  if (admin){
    router.push('AdminMain')
  }

}
</script>
<style src="../assets/css/admin.css" scoped/>
<style src="../assets/css/login.css" scoped/>
<style scoped>

</style>